<#beginBlock id="frame">
<div class="frame">
    <h3>xxxxx</h3>
    <slot>nothing framed.</slot>
</div>
<#endBlock>
<#beginBlock id="cat">
<div class="cat">
    <figure>
        222
        <figcaption>{#name#}</figcaption>
    </figure>
</div>
<#endBlock>

<div id="app">
    <framed>
        <cat :name="catName"></cat>
    </framed>
</div>
<script type="text/javascript">

    LAM.run([jQuery],function($) {
        'use strict';
        var System = this;

        $(function(){
            Vue.component("framed",{
                'template':System.Template.getBlock("frame")
            });
            Vue.component("cat",{
                'template':System.Template.getBlock("cat"),
                delimiters: ['{#', '#}'],
                'props': ['name']
            });

            new Vue({
                delimiters: ['{#', '#}'],
                el: '#app',
                data: {
                    names: ['Murzip', 'Pushok', 'Barsik', 'Vaska', 'uuuu']

                },
                computed: {
                    catName:function () {
                        return this.names[Math.floor(Math.random() * this.names.length)];
                    }
                }
            });
        });

    });
</script>